<template>
	
	<div class="bg-white">

		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>课程信息</span>
			</div>
			<div :style="'background-image:url('+kc.cover+');'" class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">课程：</div>
							<div>{{kc.kcname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded p-2 ">
							<div class="text-xs">教练：</div>
							<div>{{ajiaolian.jlname}}</div>
							
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						  <div class="bg-qingbai rounded p-2 h-full flex flex-col" style="max-height: 500px"> <!-- 方案2：自定义精确高度 -->
						    <div class="text-xs space-y-2 flex-1 overflow-hidden"> <!-- 直接隐藏溢出内容 -->
						      <div class="text-xs text-gray-600">描述：</div>
						      <div v-html="kc.ms" class="space-y-2"></div>
						    </div>
						  </div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						  <div class="bg-qingbai rounded p-2 ">
						  	<div class="text-xs">课程类型：</div>
						  	<div>{{akechenglx.lxname}}</div>
						  </div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="d-flex justify-content-between">
								<span>已报名</span>
								<span >{{kc.ybrs}}</span>
							</div>
							<div class="d-flex justify-content-between">
								<span>最小人数</span>
								<span >{{kc.zxrs}}</span>
							</div>
							<div class="d-flex justify-content-between">
								<span>最大人数</span>
								<span >{{kc.zdrs}}</span>
							</div>
							
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="d-flex justify-content-between">
								<span>价格</span>
								<span >￥{{kc.price / 100}}</span>
							</div>
							<div class="d-flex justify-content-between">
								<span>课时</span>
								<span>{{kc.cs}}</span>
							</div>
							<div class="d-flex justify-content-between">
								<span>开始时间</span>
								<span>{{ formatDate(kc.st) }}</span>
							</div>
							<div class="d-flex justify-content-between">
								<span>结束时间</span>
								<span>{{ formatDate(kc.et) }}</span>
							</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between">
							<div class="text-xs">状态：</div>
							<div v-if="kc.zt == 'C'">已取消</div>
							<div v-if="kc.zt == 'D'">进行中</div>
							<div v-if="kc.zt == 'F'">已完成</div>
							<div v-if="kc.zt == 'B'">报名中</div>
						</div>
						</Col>
					</Row>
				</div>
			</div>
		</div>
		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>课程单节信息</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(kechengitem,index) in kechengitems" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="shadow rounded p-2">
							<div class="d-flex justify-content-between">
								<div>章节名称</div>
								<span>{{kechengitem.itemname}}</span>
							</div>
							<div class="d-flex justify-content-between ">
								<div>房间</div>
								<span>{{kechengitem.rname}}</span>
							</div>
							<div class="d-flex justify-content-between ">
								<div>门店</div>
								<span>{{kechengitem.sname}}</span>
							</div>
							<div class="d-flex justify-content-between ">
								<div>日期</div>
								<span>{{kechengitem.dt}}</span>
							</div>
							<div class="d-flex justify-content-between">
								<div>开始时间</div>
								<span>{{kechengitem.st}}</span>
							</div>
							<div class="d-flex justify-content-between ">
								<div>结束时间</div>
								<span>{{kechengitem.et}}</span>
							</div>
							
						</div>
					</Col>
				</Row>
			</div>
		</div>			
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				kc: {},
				ajiaolian:{},
				akechenglx:{},
				kechengitems:[]
				}
		},
		created: function() {
			this.kc.kcid = this.$route.query.id;
			this.loadData();
		},
		mounted: function() {},
		methods: {
			formatDate(dateString) {
			      if (!dateString) return '无日期'
			      const date = new Date(dateString)
			      
			      // 处理IOS日期格式时差问题（如果后端返回的是UTC时间）
			      const offset = date.getTimezoneOffset() * 60000
			      const localDate = new Date(date.getTime() - offset)
			      
			      return localDate.toISOString().split('T')[0]
			    },
			loadData: function() {
				return this.http.get({
					url: "/kc/info",
					param: {
						kcid : this.kc.kcid
					}
				}).then(res => {
					this.kc = res.akecheng;
					this.akechenglx = res.akechenglx;
					this.ajiaolian = res.jiaolian;
					this.kechengitems = res.kechengitems;
				});
			},
			
		},
	}
</script>

<style>

</style>
